Code Playground

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="wrapper">
  
  
  <section style="--i:1;">
    <button type="button" class="icon">
      <svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><title></title><path d="M92.72,94.69c14,2.6,23.28,7.25,23.28,12.56C116,115.4,94.06,122,67,122s-49-6.6-49-14.75c0-5.1,8.6-9.6,21.67-12.25Z" style="fill: #8b5eaa"></path><path d="M54.55,112.51a24.67,24.67,0,0,1-23.75,4.68c-8-2.62-12.8-6.11-12.8-9.94,0-5.1,8.6-9.6,21.67-12.25h1.67l-4.22,12.65v0L37,108l.55.14C39.92,110.35,46.55,111.81,54.55,112.51Z" style="fill: #7b4d9e"></path><path d="M100.17,111.19c2.49-2.74,2.44-5.69-.4-8.44a3.27,3.27,0,0,1,3.2-5.51q1,.32,2,.69c16.42,6,13.35,13.9-.92,19A3.55,3.55,0,0,1,100.17,111.19Z" style="fill: #b091ce"></path><path d="M93.78,99,96,108l-1.15.32c-3.3,2.55-12.08,4.05-21.85,4.52v-10C81.86,102.41,89.9,101.14,93.78,99Z" style="fill: #ffdca4"></path><path d="M96,108l-1.15.32c-3.3,2.55-12.08,4-21.85,4.52V110.3a61.74,61.74,0,0,0,11-2.58A5.59,5.59,0,0,0,87.78,101h0a23.43,23.43,0,0,0,6-2Z" style="fill: #ffe8c7"></path><path d="M39.84,99.55c4.15,1.84,11.81,3,20.16,3.32v10c-10.91-.48-20.61-2.22-22.89-5.2Z" style="fill: #ffc050"></path><path d="M39.84,99.55c4.15,1.84,11.81,3,20.16,3.32v10c-10.91-.48-20.61-2.22-22.89-5.2Z" style="fill: #db952e"></path><path d="M60,102.87v10c-10.91-.48-20.61-2.22-22.89-5.2l.09-.28c2.07.4,4.38.73,6.86,1A6.29,6.29,0,0,0,51,102.13h0C53.8,102.49,56.85,102.73,60,102.87Z" style="fill: #edab3f"></path><path d="M93.78,99c-3.14,1.72-9,2.88-15.8,3.49-1.62.14-3.28.26-5,.34V100H60v2.87a92,92,0,0,1-15-1.74,27,27,0,0,1-5.16-1.58l1.36-4L48.07,75.1h0l-2.25-4.46L43.47,66,53.86,53.36l3.38-4.11-2.65-12.4L53.9,33.6,52,34,20,22,60.09,9.21l.13,0a8,8,0,0,1,9.72,4.32L89.18,56l-6.1,12,5.12,8.3,4.52,18.36Z" style="fill: #8b5eaa"></path><path d="M93.78,99c-3.14,1.72-9,2.88-15.8,3.49-1.62.14-3.28.26-5,.34V100H60v2.87a92,92,0,0,1-15-1.74,27,27,0,0,1-5.16-1.58l1.36-4L48.07,75.1h0l-2.25-4.46L43.47,66,53.86,53.36l3.38-4.11-2.65-12.4L53.9,33.6,52,34,20,22,60.09,9.21l.13,0a8,8,0,0,1,9.72,4.32L89.18,56l-6.1,12,5.12,8.3,4.52,18.36Z" style="fill: #8b5eaa"></path><path d="M92.72,94.69,88.2,76.33,83.08,68l6.1-12L69.94,13.49A8,8,0,0,0,64,8.91l9.43,40.35a9.17,9.17,0,0,1-4.48,10.1h0a8.1,8.1,0,0,0-3.86,4.89l-2.33,8.29A2.73,2.73,0,0,0,65.47,75h.91a3.31,3.31,0,0,1,3.3,3l.4,4.91A4.67,4.67,0,0,1,65.44,88h0A3.44,3.44,0,0,0,62,91.44v5.13A3.44,3.44,0,0,0,65.44,100H73v2.84c1.7-.08,3.36-.2,5-.34,6.81-.61,12.66-1.77,15.8-3.49Z" style="fill: #b091ce"></path><path d="M59.68,102.85,60,100v2.87Z" style="fill: #b091ce"></path><polygon points="52.32 26.24 20 22 54.18 34.94 52.32 26.24" style="fill: #7b4d9e"></polygon><path d="M45.69,99.07,45,101.13a27,27,0,0,1-5.16-1.58L48.07,75.1l4.72,4.71C55.08,88.26,50.17,93.18,45.69,99.07Z" style="fill: #7b4d9e"></path><path d="M73,112.84c-4.27.21-8.73.21-13,0V100H73v12.84Z" style="fill: #ffe8c7"></path><path d="M60.1,109.9H60V100H70v.33A9.56,9.56,0,0,1,60.1,109.9Z" style="fill: #ffc050"></path><path d="M106.12,95.15c-3.71-1.38-5.81,4.24-2.09,5.63,6.62,2.46,9,5,9,6.47,0,4.1-15.8,11.75-46,11.75s-46-7.65-46-11.75c0-2,4.34-5.75,16-8.57L34.16,107c-1.27,3.78,4.42,5.68,5.69,1.91l1.88-5.58A75.2,75.2,0,0,0,57,105.59v4.06a77.68,77.68,0,0,1-11-1.36c-3.87-.83-5.13,5-1.24,5.87,16.52,3.5,56.46,1.86,54.15-6.93-9.28-37.65-6.42-29.67-12.38-39.34l5.34-10.52c.92-1.82,1.67,1-19.19-45.12A11,11,0,0,0,59.3,6.31L19.09,19.14a3,3,0,0,0-.14,5.67C19.4,25,51.07,36.89,51.55,37L54,48.46,41.15,64.08a3,3,0,0,0-.36,3.26l4,8L39.2,92C30.87,93.39,15,98.28,15,107.25c0,23.6,104,23.6,104,0C119,102.39,114.67,98.32,106.12,95.15ZM63,109.87v-4c2.28,0,4.37.05,7,0v4C67.68,109.88,65.33,109.9,63,109.87Zm28.69-6.81.85,3.47c-3.28,1.42-9.46,2.45-16.55,3v-3.94C82,105.16,87.84,104.37,91.69,103.06ZM59.55,51.15c1.24-1.51,1-.76-3.9-23.69-.83-3.87-6.7-2.63-5.87,1.25l.29,1.36L29.15,22.23,61.13,12a5,5,0,0,1,6.08,2.7L85.86,55.94l-3,6-1.75-2.84C79,55.69,73.89,58.83,76,62.21L85.4,77.5l4.86,19.72C88.16,98,83.31,99,76,99.55A3,3,0,0,0,73,97H60a3,3,0,0,0-3,2.58,71.24,71.24,0,0,1-13.41-1.89l5.18-15.41a3,3,0,0,0,4.29-3.87L47,66.38Z" style="fill: #31352e"></path></g>
        
      </svg>
    </button>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </section>
  
  
  <section style="--i:2;">
    <button type="button" class="icon">
      <svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title></title> <path d="M75.67,29.93c23.24-6,42.33,8.35,42.33,43.29,0,34.38-19,40.64-41.28,41.76l0-.11C93.57,108,98.39,89.23,98,71c-.56-23.44-10.17-36.31-22.4-40.85Z" style="fill: #e88623"></path> <path d="M118,73.22c0,20.55-6.78,31-17,36.41v-12a5.42,5.42,0,0,0-5.42-5.42c4.8-16.54,4.69-52.87-20-62l.1-.25C98.91,23.89,118,38.28,118,73.22Z" style="fill: #f69e2e"></path> <path d="M113.08,62.8a2,2,0,0,1-2-1.68c-1.68-10.25-5.6-17.79-11.68-22.4s-14.3-5.92-23.51-3.56a2,2,0,1,1-1-3.87c10.44-2.67,19.75-1.2,26.92,4.25,6.91,5.25,11.36,13.64,13.2,24.94a2,2,0,0,1-1.65,2.3Z" style="fill: #ffe3ca"></path> <path d="M98,71c-.56-23.44-10.17-36.31-22.4-40.85A17.78,17.78,0,0,0,68,28.69a5.69,5.69,0,0,0-7.52-.1l-.15-.18a30.48,30.48,0,0,0-7.88,1.77C40.55,34.56,31.16,46.78,30.1,69h0C29,95.63,38.5,109.62,51.21,114.81h0a32.6,32.6,0,0,0,8.08,2.1l.2-.17c3.23,3.72,6.83,3.1,9.74-.92l2.16.64c9-1.88,16.3-7.31,21-16.12C96.1,93.22,98.26,83.59,98,71Z" style="fill: #db6c21"></path> <path d="M98,71C97.26,41.41,81.4,28.75,68,28.69a5.69,5.69,0,0,0-7.52-.1l-.15-.18C40.21,30.14,31.08,48.46,30.1,69h0C29,95.63,38.5,109.62,51.21,114.81h0a32.6,32.6,0,0,0,8.08,2.1l.2-.17c3.23,3.72,6.83,3.1,9.74-.92l2.16.64C91.74,112.19,98.46,92.09,98,71Z" style="fill: #db6c21"></path> <path d="M98,71c-.71-29.8-16.79-42.34-30-42.34a5.69,5.69,0,0,0-7.52-.1l-.15-.18C40.08,30.19,31.07,48.61,30.1,69h0c-.13,3.08-.12,6,0,8.75.93,0,1.88,0,2.84.12A19.28,19.28,0,0,1,50.4,97.17h0A10.55,10.55,0,0,0,61,107.72h0a3,3,0,0,1,3,2.94c0,1.54,0,3.8,0,8.56,1.83,0,3.64-1.19,5.23-3.39l2.16.64C91.74,112.19,98.46,92.1,98,71Z" style="fill: #e88623"></path> <path d="M98,71c-.56-23.44-10.17-36.31-22.4-40.85C71.08,28.48,69,28.69,68,28.69a5.69,5.69,0,0,0-7.52-.1l-.15-.18a30.84,30.84,0,0,0-7.88,1.77c-9.82,3.63-17.94,12.63-21.05,28.21h0a47.83,47.83,0,0,1,9.26.9A13,13,0,0,1,51.08,72l0,3a8,8,0,0,0,8,7.9h5.71a12.61,12.61,0,0,1,12,8.73,47.4,47.4,0,0,1,1.71,21.31l-.18,1.21C94,106.72,98.37,88.45,98,71Z" style="fill: #ffb345"></path> <path d="M98,71c-.71-29.8-16.79-42.34-30-42.34a5.69,5.69,0,0,0-7.52-.1l-.15-.18C44.4,29.81,34.62,42,31.36,58.39h0a47.83,47.83,0,0,1,9.26.9A13,13,0,0,1,51.08,72l0,3a8,8,0,0,0,8,7.9h5.71c13.64,0,15.54,17.79,13.57,31.25C94,106.72,98.37,88.45,98,71Z" style="fill: #ffb345"></path> <path d="M87.1,47.39a2,2,0,0,1-1.72-1,28.48,28.48,0,0,0-7.15-8.09,27.94,27.94,0,0,0-8.5-4.42,2,2,0,1,1,1.22-3.81,31.89,31.89,0,0,1,9.71,5,32.45,32.45,0,0,1,8.16,9.22,2,2,0,0,1-1.71,3Z" style="fill: #ffe3ca"></path> <path d="M51.21,114.82l-.07.15C28.91,113.84,10,107.53,10,73.22c0-34.94,19.09-49.33,42.32-43.29l.09.25C40.55,34.56,31.16,46.78,30.1,69h0C29,95.63,38.5,109.62,51.21,114.81Z" style="fill: #db6c21"></path> <path d="M51.21,114.81h0l-.07.15c-10.74-.55-20.7-2.31-28.14-7.84V95.22a8,8,0,0,0-8-8H11.31a67.61,67.61,0,0,1-1.31-14c0-34.94,19.09-49.33,42.32-43.29l.09.25C40.55,34.56,31.16,46.78,30.1,69h0C29,95.63,38.5,109.62,51.21,114.81Z" style="fill: #e88623"></path> <path d="M30.09,69a80.3,80.3,0,0,0,1,17.25h0a8.3,8.3,0,0,1-8.3-8.3V74a4.64,4.64,0,0,0-4.64-4.64h0a7.32,7.32,0,0,1-7.22-8.44c4-26,21.14-36.26,41.43-31l.09.25C40.55,34.56,31.16,46.78,30.1,69Z" style="fill: #ffb345"></path> <path d="M52.41,30.18a28.71,28.71,0,0,0-7.72,4.3,30.06,30.06,0,0,0-16.24,3.24,2.48,2.48,0,0,1-2.55-4.24c6.34-4.4,15-6.52,26.42-3.55Z" style="fill: #ffe3ca"></path> <path d="M69.67,11.81c-3.22,8.25,1.76,14.64,3,16.1l-.3,1.29c-.8-.2-1.6-.37-2.41-.5H68a6.17,6.17,0,0,0-4-1.47,5.65,5.65,0,0,0-3.56,1.37l-.15-.18a29.27,29.27,0,0,0-3.1.44h0L56,26.22s-1.36-6.71,3.48-15.74C62,7.22,68,9.22,69.67,11.81Z" style="fill: #599930"></path> <path d="M72.71,27.91l-.3,1.29A12.51,12.51,0,0,0,68,28.69a6.08,6.08,0,0,0-4.39-1.45,41.07,41.07,0,0,1,.22-11.8,1,1,0,0,0-.7-1.15,16.14,16.14,0,0,0-5-.77s1.24-2.66,1.45-3C62,7.22,68,9.22,69.67,11.81,66.45,20.06,71.43,26.45,72.71,27.91Z" style="fill: #7bbc51"></path> <path d="M62.1,28.19c-.34,0-.67,0-1,0A4.25,4.25,0,0,1,62.1,28.19Z" style="fill: #fff"></path> <polygon points="49 46.22 40 62.22 58 62.22 49 46.22" style="fill: #fedf49"></polygon> <polygon points="69 70.72 59 70.72 60.6 79.72 67.4 79.72 69 70.72" style="fill: #fedf49"></polygon> <polygon points="79 46.22 70 62.22 88 62.22 79 46.22" style="fill: #fedf49"></polygon> <path d="M67.4,82.22c-10.58,0-8.57,1.8-10.86-11.06A2.5,2.5,0,0,1,59,68.22c14.87,0,13.3-1.8,10.86,11.94A2.5,2.5,0,0,1,67.4,82.22Zm-4.71-5h2.61l.71-4H62Z" style="fill: #31352e"></path> <path d="M82,86.22v1.54q-2,.56-4,1V87.22c0-4-6-4-6,0v2.53c-1.32.16-2.66.27-4,.34V88.22a3,3,0,0,0-6,0v2c-1.34,0-2.68-.12-4-.24V87.22c0-4-6-4-6,0v1.93c-1.35-.24-2.68-.52-4-.85V86.22c0-4-6-4-6,0v10c0,4,6,4,6,0V94.45q2,.45,4,.78v2c0,4,6,4,6,0V96q2,.16,4,.22v2c0,4,6,4,6,0V96.1c1.34-.07,2.68-.17,4-.31v1.43c0,4,6,4,6,0V94.88c1.35-.26,2.68-.57,4-.91v2.25c0,4,6,4,6,0v-10C88,82.25,82,82.25,82,86.22Z" style="fill: #31352e"></path> <g> <path d="M79,43.22a3,3,0,0,0-2.61,1.53c-9.58,17-10.13,17-9,19s1.4,1.49,20.59,1.49a3,3,0,0,0,2.61-4.47C81,43.7,81.34,43.22,79,43.22Zm-3.87,16L79,52.34l3.87,6.88Z" style="fill: #31352e"></path> <path d="M75.65,26.85c-.51-1-6.2-6.22-3.18-14C74.53,7.61,60.55,2.14,56.84,9.06c-4.14,7.73-4.48,15.27-3.7,18-10.26-2.87-21.78-1.68-30.45,5C12.42,40,7,54.23,7,73.22,7,110.67,29.23,116.85,51,118H51a35.45,35.45,0,0,0,7.25,1.83c3.46,3.17,7.83,3.32,11.48-.08,1.4.09,5.34-1.09,7.09-1.74h0C98.69,116.88,121,110.7,121,73.22,121,35.58,99.61,21,75.65,26.85ZM62,12.18c.91-.85,3.13-.22,4.26.47a17.76,17.76,0,0,0,1,12.16,8.51,8.51,0,0,0-8.12,1l-.21-.47C58.75,24.09,58.42,19,62,12.18Zm-49,61c0-17.06,4.62-29.65,13.36-36.41a25.8,25.8,0,0,1,17.11-5.2C22,47.3,22,93.07,39.63,110.65,23.28,107.48,13,98.24,13,73.22Zm61.45,39.29c.32-.75.64-1.54,1-2.41,1.33-3.73-4.32-5.75-5.65-2-2.14,6-4.44,8.13-5.75,8.13s-4.09-2.24-6.56-10.65c-1.12-3.79-6.88-2.12-5.75,1.7a47.17,47.17,0,0,0,1.86,5.24C36.81,106.7,32.22,86.7,33.1,69.11c.52-11,3.89-30.23,20.56-36.19l.1,0a50.26,50.26,0,0,0-3.41,10.68,3,3,0,0,0-4,1.19c-9.58,17-10.13,17-9,19S39.8,65.22,48,65.22c-.08,4.1,0,8.26.25,12.43.25,4,6.24,3.59,6-.37S54,69.19,54,65.22c3.79,0,5.45.38,6.55-1.49s.26-2.57-5.5-12.81a3,3,0,0,0,.13-.52c2.15-14.8,6.43-20.18,8.79-20.18s4.34,3.42,5.44,6.29c1.41,3.69,7,1.57,5.6-2.14-.18-.48-.38-.94-.57-1.39a25.78,25.78,0,0,1,8,4.73C90.3,44.43,94.61,56,95,71.09,95.48,93.25,88.23,107.72,74.45,112.51ZM52.87,59.22H45.13L49,52.34Zm35.57,51.42c7.08-6.92,13-18.92,12.53-39.68-.35-14.95-4.5-30.44-16.51-39.34,21.62-.82,30.54,19,30.54,41.6C115,98.18,104.76,107.45,88.44,110.64Z" style="fill: #31352e"></path> </g> </g></svg>
    </button>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </section>
  
  
  <section style="--i:3;">
    <button type="button" class="icon">
      <svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title></title> <circle cx="64" cy="90" r="9" style="fill: #545f6d"></circle> <path d="M73,90a9,9,0,0,1-9.26,9A9.1,9.1,0,0,1,55,90.26,9,9,0,0,1,64,81v3.63A5.38,5.38,0,0,0,69.38,90Z" style="fill: #464f5d"></path> <path d="M64,27c14.91,0,27,8.09,27,23S78.91,81,64,81,37,64.91,37,50,49.09,27,64,27Z" style="fill: #717c89"></path> <path d="M91,51c-.51,14.62-12.39,30-27,30C49.09,81,37,64.91,37,50c0-13.9,10.5-21.87,24-22.89h0A23.89,23.89,0,0,0,84.89,51Z" style="fill: #545f6d"></path> <path d="M86,67c-4.89,8-12.93,14-22,14C49.09,81,37,64.91,37,50A21.09,21.09,0,0,1,49,30.3V40.53A26.47,26.47,0,0,0,75.47,67Z" style="fill: #464f5d"></path> <path d="M103,85a3,3,0,0,0,2.51-1.36l19.7-30.14a3,3,0,0,0-5-3.28L101.38,79H79q1.22-.86,2.35-1.85l20.94-10.47a3,3,0,0,0,1.6-2.1l9-45a3,3,0,0,0-5.88-1.18L98.35,62l-8.44,4.22A36,36,0,0,0,94,50c0-12.43-7.67-21.74-20.51-24.89a3,3,0,1,0-1.43,5.83C82.19,33.42,88,40.37,88,50A31.38,31.38,0,0,1,77.83,72.28a3,3,0,0,0-.47.41A20.56,20.56,0,0,1,64,78a20.61,20.61,0,0,1-13.49-5.41,3,3,0,0,0-.32-.29A31.37,31.37,0,0,1,40,50c0-14.76,12.93-20,24-20a3,3,0,0,0,3-3V6a3,3,0,0,0-6,0V24.1C44.73,25.21,34,35.33,34,50a36,36,0,0,0,4.09,16.19L29.65,62,20.94,18.41a3,3,0,1,0-5.88,1.18l9,45a3,3,0,0,0,1.6,2.1L46.6,77.16q1.14,1,2.35,1.84H26.62L7.81,50.21a3,3,0,0,0-5,3.28l19.7,30.14A3,3,0,0,0,25,85H53.11q-.15.32-.28.66L35.92,91.08A3,3,0,0,0,34.1,92.7L21.88,119.93a3,3,0,1,0,5.47,2.46L39,96.38,52.2,92.16c0,.19.07.38.12.56l-9.28,8A3,3,0,0,0,42,103v20a3,3,0,0,0,6,0V104.37l7.22-6.23a12.07,12.07,0,0,0,2.39,2,10,10,0,0,0-.9,9,3,3,0,1,0,5.6-2.17,4,4,0,0,1,1.7-4.88,4,4,0,0,1,1.7,4.88,3,3,0,1,0,5.6,2.17,10,10,0,0,0-.9-9,12.06,12.06,0,0,0,2.39-2L80,104.37V123a3,3,0,0,0,6,0V103a3,3,0,0,0-1-2.27l-9.28-8c0-.19.08-.37.12-.56L89,96.38l11.67,26a3,3,0,1,0,5.47-2.46L93.9,92.7a3,3,0,0,0-1.82-1.63L75.17,85.66q-.13-.33-.28-.66ZM70,90a6,6,0,0,1-5.53,6h-.15L64,96l-.32,0h-.15A6,6,0,1,1,70,90Z" style="fill: #31352e"></path> <path d="M64,67a3,3,0,0,1-3-3V41a3,3,0,0,1,6,0V64A3,3,0,0,1,64,67Z" style="fill: #31352e"></path> <path d="M71,60H57a3,3,0,0,1,0-6H71a3,3,0,0,1,0,6Z" style="fill: #31352e"></path> <g style="opacity: 0.5"> <path d="M74.14,36.33c.47,2.2,2.17,4.21,5.6,4.6a1,1,0,0,0,1.12-1.26c-.47-2.2-2.17-4.21-5.6-4.6A1,1,0,0,0,74.14,36.33Z" style="fill: #fff"></path> </g> </g></svg>
    </button>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </section>
  
  
  <section style="--i:4;">
    <button type="button" class="icon">
     <svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title></title> <circle cx="63.5" cy="63.5" r="56" style="fill: #fff4de"></circle> <g> <circle cx="63.5" cy="63.5" r="56" style="fill: #fff9de"></circle> <path d="M117.46,78.52A56,56,0,1,1,44,11a56,56,0,0,0,73.42,67.54Z" style="fill: #ffe082"></path> <ellipse cx="65.6" cy="28.21" rx="6.94" ry="8.87" style="fill: #ffeea3" transform="translate(1.86 60.4) rotate(-50.06)"></ellipse> <ellipse cx="55.4" cy="101.98" rx="9.07" ry="11.58" style="fill: #ffeea3" transform="translate(-59.71 116.76) rotate(-68.8)"></ellipse> <ellipse cx="57.73" cy="66.42" rx="6.03" ry="7.71" style="fill: #ffeea3" transform="translate(-30.26 68.05) rotate(-50.06)"></ellipse> <ellipse cx="24.73" cy="72.42" rx="6.03" ry="7.71" style="fill: #ffeea3" transform="translate(-21.13 11.16) rotate(-17.97)"></ellipse> <ellipse cx="88.55" cy="90.71" rx="4.62" ry="5.9" style="fill: #ffeea3" transform="translate(-25.02 147.02) rotate(-72.07)"></ellipse> <ellipse cx="88.67" cy="59.11" rx="5.13" ry="6.56" style="fill: #ffeea3" transform="translate(-13.58 89.16) rotate(-50.06)"></ellipse> <ellipse cx="97.67" cy="36.11" rx="5.13" ry="6.56" style="fill: #ffeea3" transform="translate(1.42 75.86) rotate(-42.73)"></ellipse> </g> <path d="M52,55.08,52,55l1-17,7,5h8l7-5,1,17.1A26.9,26.9,0,0,0,90,38.37h0c10.1-4.88,22.93-6,34-5-10,1.7-11.61,14.9-1.73,18.31C109,50.14,100.21,64.46,108.6,74.29c-12.93-.64-23.23,10.4-20.24,22.46C72.12,80.68,64,103,64,103S59.61,90.93,50.82,90.93c-3.16,0-6.88,1.56-11.18,5.82,3-12.06-7.31-23.1-20.24-22.46,8.39-9.83-.35-24.15-13.67-22.67C15.61,48.21,14,35,4,33.31c11.09-.91,23.92.17,34,5h0A26.89,26.89,0,0,0,52,55.08Z" style="fill: #404b4f"></path> <path d="M52,55.08,52,55l1-17,7,5h8l7-5,1,17.1A26.9,26.9,0,0,0,90,38.37h0c10.1-4.88,22.93-6,34-5-10,1.7-11.61,14.9-1.73,18.31C109,50.14,100.21,64.46,108.6,74.29c-12.93-.64-23.23,10.4-20.24,22.46C72.12,80.68,64,103,64,103S59.61,90.93,50.82,90.93c-3.16,0-6.88,1.56-11.18,5.82,3-12.06-7.31-23.1-20.24-22.46,8.39-9.83-.35-24.15-13.67-22.67C15.61,48.21,14,35,4,33.31c11.09-.91,23.92.17,34,5h0A26.89,26.89,0,0,0,52,55.08Z" style="fill: #5b6584"></path> <path d="M37.9,38.31C27.82,33.47,15,32.4,4,33.31,14,35,15.61,48.21,5.73,51.62,19,50.14,27.79,64.46,19.4,74.29c12.93-.64,23.23,10.4,20.24,22.46C48.48,80.54,44.39,55.5,37.9,38.31Z" style="fill: #677493"></path> <path d="M90.1,38.31c10.08-4.83,22.86-5.9,33.9-5-10,1.7-11.61,14.9-1.73,18.31C109,50.14,100.21,64.46,108.6,74.29c-12.93-.64-23.23,10.4-20.24,22.46C79.52,80.54,83.61,55.5,90.1,38.31Z" style="fill: #677493"></path> <path d="M20.11,73.4c4.41-2.13,17.65-10.57,17.6-35.12C36,39.81,26.73,47.51,7,51.53,19.2,51.06,27,63.94,20.11,73.4Z" style="fill: #677493"></path> <path d="M4,33.31C14,35,15.61,48.21,5.73,51.62c9-1,24.86-6.85,32-13.38C27.69,33.47,15,32.41,4,33.31Z" style="fill: #7685a5"></path> <path d="M107.89,73.4c-4.41-2.13-17.65-10.57-17.6-35.12,1.69,1.54,11,9.24,30.73,13.25C108.8,51.06,101,63.94,107.89,73.4Z" style="fill: #677493"></path> <path d="M124,33.31c-10,1.7-11.61,14.9-1.73,18.31-9-1-24.86-6.85-32-13.38C100.31,33.47,113,32.41,124,33.31Z" style="fill: #7685a5"></path> <path d="M66.12,58.88a3,3,0,1,1-4.24,0Z" style="fill: #31352e"></path> <path d="M63,52.5a3,3,0,1,1-3-3Z" style="fill: #31352e"></path> <path d="M68,49.5a3,3,0,1,1-3,3Z" style="fill: #31352e"></path> <path d="M124.5,36.27a3,3,0,0,0-.26-5.95,90.32,90.32,0,0,0-11.92-.18,59,59,0,0,0-91.46-6.4c-2.71,2.9,1.68,7,4.39,4.09a53,53,0,0,1,80.06,3,57.39,57.39,0,0,0-16.63,4.84,3,3,0,0,0-1.6,2A23.81,23.81,0,0,1,78.7,49.88C78,37.17,78.39,36.3,76.29,35.29s-3,.2-9.25,4.71H61c-6.31-4.51-7.2-5.69-9.25-4.71S50,37.38,49.3,49.88a24,24,0,0,1-8.43-12.41c-1.2-3.79-18.93-8.64-37.11-7.14a3,3,0,0,0-.26,5.95c6.84,1.16,8.28,10.09,1.25,12.51a3,3,0,0,0,1,5.82,59,59,0,1,0,117.12,5.5,3,3,0,0,0-3.19-2.8,3,3,0,0,0-2.8,3.19A53,53,0,1,1,11.73,55.19a11.8,11.8,0,0,1,6.73,5.64A9.91,9.91,0,0,1,18,71.18a3,3,0,0,0-1.84,3.76,3.68,3.68,0,0,0,3.4,2.35,17.34,17.34,0,0,1,14.28,6.12A14.11,14.11,0,0,1,37,94.5c-.35.57-.57.94-.61,1A3,3,0,0,0,39,100a4,4,0,0,0,3-1.39c3.79-3.67,7.23-5.19,10.2-4.54,4.73,1,8.08,7.54,9,9.95a3,3,0,0,0,5.64,0c.89-2.41,4.23-8.91,9-10,3-.65,6.42.88,10.22,4.56a3.26,3.26,0,0,0,5.6-3.13c0-.07-.25-.44-.61-1a14.1,14.1,0,0,1,3.18-11.09,17.32,17.32,0,0,1,14.28-6.12,4,4,0,0,0,3.71-2.35,3,3,0,0,0-1.91-3.79L109.9,71a9.9,9.9,0,0,1-.36-10.18,12.28,12.28,0,0,1,12.4-6.23,3,3,0,0,0,1.31-5.82c-3.12-1.08-4.84-3.5-4.59-6.49A6.67,6.67,0,0,1,124.5,36.27ZM18.13,51.73A76.72,76.72,0,0,0,31.2,46.26,3,3,0,1,0,28.35,41a72.12,72.12,0,0,1-13.55,5.5,12.15,12.15,0,0,0,.52-4.68,12.43,12.43,0,0,0-2-5.76c6.54.17,14.44,1.19,21.61,4.25-.4,13.35-5,21.17-9.31,25.6A16.18,16.18,0,0,0,23.76,58,17.59,17.59,0,0,0,18.13,51.73Zm67.5,35.32a46.56,46.56,0,0,0-7.84-7.6C74.6,77.1,71,81.92,74.22,84.28A34.74,34.74,0,0,1,78.39,88c-6.19-.58-11,3.32-14.39,8.5C60.64,91.3,55.8,87.4,49.61,88a34.83,34.83,0,0,1,4.17-3.7c3.19-2.36-.38-7.19-3.57-4.82a46.56,46.56,0,0,0-7.84,7.6,20.68,20.68,0,0,0-3.91-7.45,22.78,22.78,0,0,0-11-7.26c4.79-4,10.47-11.07,12.62-23.25a30.25,30.25,0,0,0,10.54,8.68,3,3,0,0,0,4-1.35c.49-1,.42-3.17,1-12.83C58.32,45.49,58.77,46,60,46c10.37,0,8.09.62,12.32-2.4.69,11.8.16,13.1,2.36,14.18a2.92,2.92,0,0,0,1.91.25c1.21-.24,7.12-3.33,11.54-9.26,2.1,12.32,7.78,19.5,12.6,23.51A21.9,21.9,0,0,0,85.63,87.05Zm18.61-29a16.21,16.21,0,0,0-1.9,7.49c-4.23-4.52-8.64-12.32-9-25.34A60.43,60.43,0,0,1,114.63,36a12.43,12.43,0,0,0-2,5.76,12.16,12.16,0,0,0,.49,4.58A71.78,71.78,0,0,1,100,41c-3.49-1.89-6.34,3.4-2.85,5.28A76.54,76.54,0,0,0,110,51.66,17.59,17.59,0,0,0,104.24,58Z" style="fill: #31352e"></path> <ellipse cx="64" cy="79" rx="6.25" ry="9" style="fill: #677493"></ellipse> </g></svg>
    </button>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </section>
  
  
  <section style="--i:5;">
    <button type="button" class="icon">
      <svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title></title> <path d="M64.34,14.66A8,8,0,0,0,70,17a8,8,0,0,0-8,8,8,8,0,0,0-8-8,8,8,0,0,0,8-8A8,8,0,0,0,64.34,14.66Z" style="fill: #fcd116"></path> <path d="M30.81,50.19A13,13,0,0,0,40,54,13,13,0,0,0,27,67,13,13,0,0,0,14,54,13,13,0,0,0,27,41,13,13,0,0,0,30.81,50.19Z" style="fill: #cbdb2e"></path> <path d="M93.22,92.78A11,11,0,0,0,101,96a11,11,0,0,0-11,11A11,11,0,0,0,79,96,11,11,0,0,0,90,85,11,11,0,0,0,93.22,92.78Z" style="fill: #fcd116"></path> <path d="M85.56,38.42A177.85,177.85,0,0,1,107.11,8.87a5,5,0,0,1,7.06-.2l.1.1a5,5,0,0,1,.1,7A172,172,0,0,0,94.19,43.47C85.68,58,71.79,69.18,64.88,74.16l-1.3,1.3-7.19-7.2L57.62,67C63.1,63.2,77.41,52.36,85.56,38.42Z" style="fill: #a2542a"></path> <path d="M114.27,8.77l-.1-.1a5,5,0,0,0-2.27-1.2,5,5,0,0,1-1.22,4.59A172,172,0,0,0,90.51,39.79C82,54.35,68.11,65.5,61.2,70.48l-1.3,1.3,3.68,3.68,1.3-1.3c6.91-5,20.8-16.13,29.31-30.69a172,172,0,0,1,20.18-27.73A5,5,0,0,0,114.27,8.77Z" style="fill: #bf7f66"></path> <g> <path d="M79.88,54.1A124.9,124.9,0,0,1,60.71,71.16l-.72.72,3.58,3.59,1.3-1.3A123.71,123.71,0,0,0,85.08,56L83.15,54A2.26,2.26,0,0,0,79.88,54.1Z" style="fill: #d3987f"></path> <path d="M90.55,39.6a2.71,2.71,0,0,0,.39,3.34l2.22,2.22c.52-.84,2.81-4.8,6.29-10.05l-2.17-2.28a1.65,1.65,0,0,0-2.57.23C93.41,35,92,37.21,90.55,39.6Z" style="fill: #d3987f"></path> <path d="M111.17,7.35c1.9,4.46-.65,3.58-10.59,17.19a2,2,0,0,0,.2,2.6l2.46,2.46a144.21,144.21,0,0,1,11.14-13.87A5,5,0,0,0,111.17,7.35Z" style="fill: #d3987f"></path> </g> <polygon points="66.9 78.77 54.17 84.43 46.39 76.65 52.05 63.93 56.39 68.26 63.58 75.46 66.9 78.77" style="fill: #f9d8a2"></polygon> <polygon points="60.58 72.46 56.39 68.26 54.75 66.62 59.2 71.08 60.58 72.46" style="fill: #f2c05c"></polygon> <polygon points="62.52 74.39 60.58 72.46 62.52 74.4 62.52 74.39" style="fill: #f2c05c"></polygon> <path d="M52,63.93,46.39,76.65l3.41,3.41h0a9.57,9.57,0,0,0,2.87-15.51Z" style="fill: #f2c05c"></path> <path d="M54.1,93.17a47,47,0,0,1-13.37,28.74c-2.7,2.7-7.22-.09-12-5s-10-12-13.86-17.63c-3.54-5.22-5.95-9.23-5.95-9.23C28,71,46.39,76.65,46.39,76.65l7.78,7.78Z" style="fill: #f2c05c"></path> <path d="M54.1,93.17a47,47,0,0,1-13.37,28.74c-2.7,2.7-7.22-.09-12-5s-10-12-13.86-17.63c-3.54-5.22-5.95-9.23-5.95-9.23C28,71,46.39,76.65,46.39,76.65l7.78,7.78Z" style="fill: #f9d8a2"></path> <path d="M44.95,114l1.27,1.27a45.23,45.23,0,0,1-5.49,6.64c-2.7,2.7-7.22-.09-12-5s-10-12-13.86-17.63c-3.54-5.22-5.95-9.23-5.95-9.23C28,71,46.39,76.65,46.39,76.65l3.81,3.81-5.25,5.25A20,20,0,0,0,44.95,114Z" style="fill: #f2c05c"></path> <path d="M28.32,109.66,25,112.93A162.11,162.11,0,0,1,14.86,99.32c-3.54-5.22-5.95-9.23-5.95-9.23C23.76,75.25,38.17,75.36,43.85,76.15L30.13,89.87c-3.22,3.22-4.59,8.15-1.21,13.46A5.06,5.06,0,0,1,28.32,109.66Z" style="fill: #d39d48"></path> <g> <path d="M116.41,6.67a8,8,0,0,0-11.48.14C82.34,30.63,85.44,43.62,56.51,64.14c-2.26-2.26-3.08-3.53-5-3.17s-2,1.24-6.87,12.25C38.54,72.28,22.87,71.89,6.79,88a3,3,0,0,0-.45,3.67c7,11.7,26.79,42.12,36.51,32.4A50,50,0,0,0,57.09,93.47c.4-3.94-5.57-4.56-6-.61a44,44,0,0,1-12.5,26.92c-1,.94-4.45-1.82-5.49-2.73,3-2.74,7.87-7.66,10.89-12.69,2-3.4-3.1-6.49-5.14-3.09-2.68,4.47-7.3,9-10,11.52a142.15,142.15,0,0,1-10.08-13,55.05,55.05,0,0,1,6.5-5c3.4-2,.31-7.19-3.09-5.14a56.39,56.39,0,0,0-6.8,5.17c-.94-1.44-1.85-2.85-2.7-4.23C27.8,76.64,41.67,78.65,44.85,79.36c7.57,7.57,7.46,7.79,8.8,8s1.61-.15,14.46-5.87a3,3,0,0,0,.9-4.86l-1-1C75.73,69.87,88.58,59,96.78,45A169.22,169.22,0,0,1,116.55,17.8,8,8,0,0,0,116.41,6.67ZM54.83,80.85,50,76l3-6.85,8.67,8.67Zm57.35-67.17C91,36.23,93,50,63.68,71.32l-2.87-2.87c29.2-21.13,27-34.82,48.48-57.51A2,2,0,0,1,112.19,13.68Z" style="fill: #31352e"></path> <path d="M14,57A10,10,0,0,1,24,67a3,3,0,0,0,6,0A10,10,0,0,1,40,57a3,3,0,0,0,0-6A10,10,0,0,1,30,41a3,3,0,0,0-6,0A10,10,0,0,1,14,51a3,3,0,0,0,0,6Zm13-6.68A16.12,16.12,0,0,0,30.68,54,16.12,16.12,0,0,0,27,57.68,16.12,16.12,0,0,0,23.32,54,16.12,16.12,0,0,0,27,50.32Z" style="fill: #31352e"></path> <path d="M101,93a8,8,0,0,1-8-8,3,3,0,0,0-6,0,8,8,0,0,1-8,8,3,3,0,0,0,0,6,8,8,0,0,1,8,8,3,3,0,0,0,6,0,8,8,0,0,1,8-8,3,3,0,0,0,0-6ZM90,98.35A14.14,14.14,0,0,0,87.65,96,14.14,14.14,0,0,0,90,93.65,14.14,14.14,0,0,0,92.35,96,14.14,14.14,0,0,0,90,98.35Z" style="fill: #31352e"></path> <path d="M54,20a5,5,0,0,1,5,5,3,3,0,0,0,6,0,5,5,0,0,1,5-5,3,3,0,0,0,0-6,5,5,0,0,1-5-5,3,3,0,0,0-6,0,5,5,0,0,1-5,5,3,3,0,0,0,0,6Zm8-3.46.46.46-.46.46L61.54,17Z" style="fill: #31352e"></path> </g> </g></svg>
    </button>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </section>
  
  
  <section style="--i:6;">
    <button type="button" class="icon">
      <svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title></title> <circle cx="78" cy="14" r="7" style="fill: #57b260"></circle> <path d="M77.16,21a6.85,6.85,0,0,1-5.25-3.52A2.85,2.85,0,0,1,76,13.78,7,7,0,0,0,80,15h.06a2.71,2.71,0,0,1,1.61,5A7,7,0,0,1,77.16,21Z" style="fill: #3d9940"></path> <path d="M32,41.5A8.5,8.5,0,1,1,49,42H32Z" style="fill: #57b260"></path> <path d="M45.5,42H32v-.5a8.51,8.51,0,0,1,5.32-7.88.14.14,0,0,0,0,.06A5.11,5.11,0,0,0,37,35.5C37,39.09,40.81,42,45.5,42Z" style="fill: #3d9940"></path> <path d="M49,42v0H48A8.21,8.21,0,0,0,49,42Z" style="fill: #3d9940"></path> <path d="M92,112.1a42.09,42.09,0,0,0,6.86-5.58L100,107l5,16H99l-6-10.67Z" style="fill: #596870"></path> <path d="M30.16,106.52a41.51,41.51,0,0,0,6,5l-.19.79L30,123H24l5-16Z" style="fill: #596870"></path> <path d="M102.65,63.91A18.81,18.81,0,0,1,99,52h3a5,5,0,0,0,0-10c-82.1,0-77.42-.64-79.54,1.46A5,5,0,0,0,26,52h4a18.81,18.81,0,0,1-3.61,11.91A32.34,32.34,0,0,0,20,83c0,20.46,19.93,37,44.5,37S109,103.49,109,83A32.34,32.34,0,0,0,102.65,63.91Z" style="fill: #979ea0"></path> <path d="M108.85,86C107,105.09,87.76,120,64.5,120,39.93,120,20,103.43,20,83a32.34,32.34,0,0,1,6.35-19.06A18.83,18.83,0,0,0,30,52H26a5,5,0,0,1-3.54-8.54c2-2-.24-1.46,50.53-1.46a4,4,0,0,1,4,4V61l6,17.46A12,12,0,0,0,94.12,86Z" style="fill: #747f84"></path> <path d="M73,42H50.52a11.51,11.51,0,0,1,21.55-8A8.5,8.5,0,0,1,86,40.5v40a4.5,4.5,0,0,1-9,0V46A4,4,0,0,0,73,42Z" style="fill: #57b260"></path> <ellipse cx="61.5" cy="32.5" rx="1.5" ry="2.5" style="fill: #a3d6a5" transform="translate(10.47 79.78) rotate(-70.67)"></ellipse> <ellipse cx="77.76" cy="36.61" rx="0.9" ry="1.51" style="fill: #a3d6a5" transform="translate(17.48 97.87) rotate(-70.67)"></ellipse> <ellipse cx="40.76" cy="37.61" rx="0.9" ry="1.51" style="fill: #a3d6a5" transform="translate(-8.22 63.62) rotate(-70.67)"></ellipse> <ellipse cx="78.76" cy="11.61" rx="0.9" ry="1.51" style="fill: #a3d6a5" transform="translate(41.74 82.08) rotate(-70.67)"></ellipse> <path d="M67,38H65.5a11.5,11.5,0,0,1-11.11-8.53A11.54,11.54,0,0,0,50.52,42H73a4,4,0,0,1,4,4V85h5V46a8,8,0,0,0-8-8Z" style="fill: #3d9940"></path> <path d="M82.7,116.76A52,52,0,0,1,64.5,120C39.93,120,20,103.43,20,83c0-.33,0-.65,0-1a32.4,32.4,0,0,1,6.33-18.09A18.83,18.83,0,0,0,30,52H26a5,5,0,0,1-5-4.9A4.35,4.35,0,0,1,21.09,46c.82-4.3,4.6-4,7.16-4,5.58-.16,17.55,0,44.74,0a4,4,0,0,1,4,4V57H66.58A12,12,0,0,0,54.81,71.31l5.29,27A12,12,0,0,0,71.88,108H81C86,108,87.39,115,82.7,116.76Z" style="fill: #596870"></path> <path d="M54,47a2,2,0,0,1-2-2V42H26a5,5,0,0,0,0,10H77V47Z" style="fill: #505d68"></path> <path d="M107,47a5,5,0,0,1-5,5H86V42h16A5,5,0,0,1,107,47Z" style="fill: #505d68"></path> <path d="M102,42H86V57H99.52A23.18,23.18,0,0,1,99,52h3a5,5,0,0,0,0-10Z" style="fill: #505d68"></path> <path d="M107,47a5,5,0,0,0-5-5H86V52h16A5,5,0,0,0,107,47Z" style="fill: #747f84"></path> <path d="M107,47H86V42h16A5,5,0,0,1,107,47Z" style="fill: #979ea0"></path> <path d="M52,52H26a5,5,0,0,1-5-5H47A5,5,0,0,1,52,52Z" style="fill: #404b4f"></path> <path d="M86,47h7a2,2,0,0,1,2,2v3a0,0,0,0,1,0,0H86a0,0,0,0,1,0,0V47A0,0,0,0,1,86,47Z" style="fill: #505d68"></path> <g> <path d="M103,106.42c11.36-13.19,12-30.67,2.12-44.26a15.86,15.86,0,0,1-2.9-7.16A8,8,0,0,0,102,39H88.89a11.5,11.5,0,0,0-15.74-9.14,14.51,14.51,0,0,0-22.45-1c-2.64,3,1.82,7,4.47,4a8.5,8.5,0,0,1,14.15,2.31A3,3,0,0,0,74,36.27,5.43,5.43,0,0,1,77.5,35,5.51,5.51,0,0,1,83,40.5v40a1.5,1.5,0,0,1-3,0V46a7,7,0,0,0-7-7H51.72a11.49,11.49,0,0,0-22.44,0H26a8,8,0,0,0-8,8c0,3.81,2.72,8,8.81,8a15.86,15.86,0,0,1-2.89,7.15C14.05,75.8,14.74,93.3,26,106.45l-4.89,15.66A3,3,0,0,0,24,126c9.33,0,6.77,1.74,13.45-10.12,16,9.37,37.59,9.64,54.09,0l4.85,8.62C97.48,126.42,99,126,105,126a3,3,0,0,0,2.86-3.89ZM102,49H89V45h13A2,2,0,0,1,102,49ZM40.5,36a5.47,5.47,0,0,1,4.9,3H35.61A5.5,5.5,0,0,1,40.5,36ZM28.25,120h-.17l2.75-8.8q.79.67,1.63,1.31Zm.54-54.34a21.74,21.74,0,0,0,4.09-10.81A3,3,0,0,0,32,49H26a2,2,0,0,1,0-4c49.87,0,48-.46,48,1v3H42c-4,0-4,6,0,6H74V80.5a7.51,7.51,0,0,0,12.79,5.32A7.41,7.41,0,0,0,89,80.5V55h7.15a21.74,21.74,0,0,0,4.07,10.67C116.37,88,96.93,117,64.5,117,32.44,117,12.47,88.23,28.78,65.66Zm72,54.34-4.22-7.5q.83-.64,1.63-1.32l2.76,8.82Z" style="fill: #31352e"></path> <path d="M61,61v5c0,4,6,4,6,0V61C67,57,61,57,61,61Z" style="fill: #31352e"></path> <path d="M78,24A10,10,0,1,0,68,14,10,10,0,0,0,78,24Zm0-14a4,4,0,1,1-4,4A4,4,0,0,1,78,10Z" style="fill: #31352e"></path> <path d="M45.5,23A4.5,4.5,0,1,0,41,18.5,4.5,4.5,0,0,0,45.5,23Zm0-6A1.5,1.5,0,1,1,44,18.5,1.5,1.5,0,0,1,45.5,17Z" style="fill: #31352e"></path> </g> </g></svg>
    </button>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </section>
  
  
  <section style="--i:7;">
    <button type="button" class="icon">
      <svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><title></title><path d="M118,77.71V95.6a11.62,11.62,0,0,1-3.85,8.64,10.7,10.7,0,0,1-6.42,2.74l-4.22-.13L99,106.72A12,12,0,0,1,87,118h-.38a12,12,0,0,1-11-8.2L75,110a11,11,0,0,1-22,0l-.62-.21a12,12,0,0,1-11,8.2H41a12,12,0,0,1-12-12v-1H27.28a11,11,0,0,1-6.34,2A11.26,11.26,0,0,1,10,95.6V77.71A43.7,43.7,0,0,1,31.73,39.92,31.33,31.33,0,0,0,45.19,23.24c6.4-17.7,31.25-17.6,37.62,0A31.33,31.33,0,0,0,96.27,39.92,43.7,43.7,0,0,1,118,77.71Z" style="fill: #e4e6ea"></path><path d="M86.37,119.74A3,3,0,0,1,85,114.06a9.07,9.07,0,0,0,1.5-.94A9,9,0,0,0,90,106V95a3,3,0,0,1,6,0v11a15,15,0,0,1-8.29,13.42A3,3,0,0,1,86.37,119.74Z" style="fill: #fff"></path><path d="M116,77V97a15,15,0,0,1-1.85,7.24,10.7,10.7,0,0,1-6.42,2.74l-4.22-.13a2.93,2.93,0,0,1,1.51-1.79,9.74,9.74,0,0,0,1.5-1A9,9,0,0,0,110,97V77a3,3,0,0,1,6,0Z" style="fill: #fff"></path><path d="M62.37,123.74A3,3,0,0,1,61,118.06a9.07,9.07,0,0,0,1.5-.94A9,9,0,0,0,66,110a3,3,0,0,1,6,0,15,15,0,0,1-8.29,13.42A3,3,0,0,1,62.37,123.74Z" style="fill: #fff"></path><path d="M97.78,37.33A28.49,28.49,0,0,1,85.63,22.22C78.3,2,49.72,1.91,42.37,22.22A28.49,28.49,0,0,1,30.22,37.33,46.91,46.91,0,0,0,7,77.71V95.6C7,105.81,17.07,112.75,26.31,109a15,15,0,0,0,25.33,7.61,14,14,0,0,0,24.72,0C85.79,126,102,119.34,102,106V95c0-4-6-4-6,0v11c0,10.2-14.34,12.51-17.53,2.85C77.33,105.41,72,106.7,72,110a8,8,0,0,1-16,0c0-3.3-5.33-4.58-6.47-1.15a9,9,0,0,1-14.05,4.26C31.17,109.76,32,106.22,32,95c0-4-6-4-6,0v7.33c-1,.49-2.18,1.67-5,1.67a8.22,8.22,0,0,1-8-8.4V77.71a40.89,40.89,0,0,1,20.24-35.2A34.49,34.49,0,0,0,48,24.26c5.44-15,26.56-15,32,0A34.49,34.49,0,0,0,94.76,42.51,40.89,40.89,0,0,1,115,77.71V95.6a8.25,8.25,0,0,1-7.47,8.38c-3.94.27-3.58,6.23.41,6A14.27,14.27,0,0,0,121,95.6V77.71A46.91,46.91,0,0,0,97.78,37.33Z" style="fill: #31352e"></path><ellipse cx="64" cy="41" rx="4" ry="6" style="fill: #31352e"></ellipse><path d="M62,27.5A5.5,5.5,0,1,1,56.5,22Z" style="fill: #31352e"></path><path d="M71.5,22A5.5,5.5,0,1,1,66,27.5Z" style="fill: #31352e"></path></g></svg>
    </button>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </section>

<section style="--i:8;">
    <button type="button" class="icon">
      <svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title></title> <polygon points="27 64 27 46 13 42 13 64 27 64" style="fill: #d6eef2"></polygon> <polygon points="117 64 117 46 103 42 103 64 117 64" style="fill: #d6eef2"></polygon> <polygon points="72 49 72 31 58 27 58 49 72 49" style="fill: #d6eef2"></polygon> <polygon points="123 64 97 64 97 72 101 72 101 84 119 84 119 72 123 72 123 64" style="fill: #707782"></polygon> <polygon points="33 64 7 64 7 72 11 72 11 84 29 84 29 72 33 72 33 64" style="fill: #707782"></polygon> <path d="M74,73H56a6,6,0,0,0-5.19,3H69a3,3,0,0,1,3,3v4a3,3,0,0,1-3,3H50.81A6,6,0,0,0,56,89H74a6,6,0,0,0,6-6V79A6,6,0,0,0,74,73Z" style="fill: #eff8ff"></path> <path d="M68,79v4a3,3,0,0,1-3,3h4a3,3,0,0,0,3-3V79a3,3,0,0,0-3-3H65A3,3,0,0,1,68,79Z" style="fill: #b0b8c0"></path> <path d="M50.8,86v0H51Z" style="fill: #707782"></path> <path d="M51,76h-.19v0Z" style="fill: #707782"></path> <path d="M50,79v4a6,6,0,0,0,.8,3l.2,0H65a3,3,0,0,0,3-3V79a3,3,0,0,0-3-3H51l-.2,0A6,6,0,0,0,50,79Z" style="fill: #707782"></path> <path d="M86,121v4H44v-4a6,6,0,0,1,6-6H80A6,6,0,0,1,86,121Z" style="fill: #eff8ff"></path> <path d="M72,121v4H44v-4a6,6,0,0,1,6-6H66A6,6,0,0,1,72,121Z" style="fill: #b0b8c0"></path> <path d="M68,121v4H44v-4a6,6,0,0,1,6-6H62A6,6,0,0,1,68,121Z" style="fill: #707782"></path> <circle cx="65" cy="102" r="13" style="fill: #707782"></circle> <path d="M78,102A13,13,0,1,1,65,89,13,13,0,0,1,78,102Z" style="fill: #eff8ff"></path> <path d="M60,112a10,10,0,1,1,10-10A10,10,0,0,1,60,112Z" style="fill: #b0b8c0"></path> <path d="M72,102a13,13,0,0,1-10,12.65,13,13,0,0,1,0-25.3A13,13,0,0,1,72,102Z" style="fill: #b0b8c0"></path> <path d="M69,102a13,13,0,0,1-8.5,12.2,13,13,0,0,1,0-24.4A13,13,0,0,1,69,102Z" style="fill: #707782"></path> <rect height="8" style="fill: #b0b8c0" width="26" x="7" y="64"></rect> <path d="M20,37l1.91-1.49S30,29.2,20,19c-10,10.2-1.91,16.51-1.91,16.51l1.6,1.25" style="fill: #ffbb7d"></path> <path d="M110,37l1.91-1.49S120,29.2,110,19c-10,10.2-1.91,16.51-1.91,16.51l1.6,1.25" style="fill: #ffbb7d"></path> <path d="M65,22l1.91-1.49S75,14.2,65,4c-10,10.2-1.91,16.51-1.91,16.51l1.6,1.25" style="fill: #ffbb7d"></path> <polygon points="78 49 52 49 52 57 56 57 56 73 74 73 74 57 78 57 78 49" style="fill: #707782"></polygon> <path d="M27,64v6a2,2,0,0,1-2,2H23V84h6V72h4V64Z" style="fill: #eff8ff"></path> <rect height="8" style="fill: #b0b8c0" width="26" x="52" y="49"></rect> <path d="M72,49v6a2,2,0,0,1-2,2H68V73h6V57h4V49Z" style="fill: #eff8ff"></path> <rect height="8" style="fill: #b0b8c0" width="26" x="97" y="64"></rect> <path d="M117,64v6a2,2,0,0,1-2,2h-2V84h6V72h4V64Z" style="fill: #eff8ff"></path> <polygon points="66 29.29 66 49 72 49 72 31 66 29.29" style="fill: #eff8ff"></polygon> <polygon points="111 44.29 111 64 117 64 117 46 111 44.29" style="fill: #eff8ff"></polygon> <polygon points="21 44.29 21 64 27 64 27 46 21 44.29" style="fill: #eff8ff"></polygon> <g> <path d="M18,39.24c2.16,1.92,4.17-.14,5.74-1.36,4.47-3.49,7.34-11.85-1.61-21a3.09,3.09,0,0,0-4.28,0c-4.15,4.23-6.11,8.51-5.83,12.72S14.55,36.87,18,39.24Zm2-15.61c3.08,4.34,2.18,7.86,0,9.57C17.87,31.53,16.87,28,20,23.63Z" style="fill: #31352e"></path> <path d="M107.85,39.13c2.49,1.91,3.85.34,5.9-1.25A11.89,11.89,0,0,0,118,29.62c.28-4.21-1.68-8.49-5.83-12.72a3.09,3.09,0,0,0-4.28,0c-4.15,4.23-6.11,8.51-5.83,12.72C102.41,35.33,106.38,38,107.85,39.13ZM110,23.63a9,9,0,0,1,2,5.52,5.89,5.89,0,0,1-2,4C107.87,31.53,106.87,28,110,23.63Z" style="fill: #31352e"></path> <path d="M63,24.24c2.16,1.92,4.17-.14,5.74-1.36A11.89,11.89,0,0,0,73,14.62c.28-4.21-1.68-8.49-5.83-12.72a3.09,3.09,0,0,0-4.28,0C58.71,6.13,56.75,10.41,57,14.62S59.59,21.9,63,24.24ZM65,8.63c2.31,3.26,3,7.23,0,9.57a5.93,5.93,0,0,1-2-4A8.93,8.93,0,0,1,65,8.63Z" style="fill: #31352e"></path> <path d="M123,61h-3V46a3,3,0,0,0-2.18-2.88c-15-4.28-15-4.71-16.63-3.51S100,40.61,100,61H97a3,3,0,0,0-3,3v8a3,3,0,0,0,3,3h1v9a3,3,0,0,0,3,3h6v2.5a7.5,7.5,0,0,1-15,0V86a8,8,0,0,0-8-8H82.94A9,9,0,0,0,77,70.53V59.82A3,3,0,0,0,81,57V49a3,3,0,0,0-3-3H75V31a3,3,0,0,0-2.18-2.88c-15-4.28-15-4.71-16.63-3.51S55,25.61,55,46H52a3,3,0,0,0-3,3v8a3,3,0,0,0,3,3h1V70.53A9,9,0,0,0,47.06,78H46a8,8,0,0,0-8,8v3.5a7.5,7.5,0,0,1-15,0V87h6a3,3,0,0,0,3-3V74.82A3,3,0,0,0,36,72V64a3,3,0,0,0-3-3H30V46a3,3,0,0,0-2.18-2.88C13,38.88,12.8,38.39,11.19,39.6S10,40.61,10,61H7a3,3,0,0,0-3,3v8a3,3,0,0,0,3,3H8v9a3,3,0,0,0,3,3h6v2.5a13.5,13.5,0,0,0,27,0V86a2,2,0,0,1,2-2h1.06A9,9,0,0,0,53,91.47,15.91,15.91,0,0,0,52.53,112H50a9,9,0,0,0-9,9v4a3,3,0,0,0,3,3H86a3,3,0,0,0,3-3v-4a9,9,0,0,0-9-9H77.47A15.92,15.92,0,0,0,77,91.47,9,9,0,0,0,82.94,84C86.6,84,86,85.42,86,89.5a13.5,13.5,0,0,0,27,0V87h6a3,3,0,0,0,3-3V74.82A3,3,0,0,0,126,72V64A3,3,0,0,0,123,61ZM16,46l8,2.29V61H16ZM14,75h7c4,0,4-6,0-6H10V67H30v2.18A3,3,0,0,0,26,72v9H14ZM61,31l8,2.29V46H61Zm5,29c4,0,4-6,0-6H55V52H75v2.18A3,3,0,0,0,71,57V70H59V60ZM53,79a3,3,0,0,1,3-3H74a3,3,0,0,1,3,3v4a3,3,0,0,1-3,3H56a3,3,0,0,1-3-3Zm30,42v1H47v-1a3,3,0,0,1,3-3H80A3,3,0,0,1,83,121ZM55,102a10,10,0,1,1,10,10A10,10,0,0,1,55,102Zm51-56,8,2.29V61h-8Zm10,26v9H104V75h7c4,0,4-6,0-6H100V67h20v2.18A3,3,0,0,0,116,72Z" style="fill: #31352e"></path> </g> </g></svg>
    </button>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </section>
  
  <svg class="witch" height="200px" width="200px" version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <style type="text/css"> .st0{fill:#000000;} </style> <g> <path class="st0" d="M499.059,412.197c4.205,0,8.523-0.046,12.941-0.153l-0.191-7.279c-2.442,0.053-4.853,0.092-7.226,0.114 l0.03-4.395c-18.504-0.13-35.001-1.015-49.346-2.251c4.998,0.13,10.263,0.222,15.81,0.222c10.622,0,22.22-0.283,34.727-0.984 l-0.435-7.272c-12.361,0.687-23.815,0.962-34.292,0.962c-24.364,0.007-43.471-1.519-56.458-3.037 c-6.485-0.764-11.446-1.518-14.772-2.091c-1.664-0.282-2.915-0.511-3.747-0.679c-0.092-0.015-0.152-0.031-0.244-0.046 l-15.376-13.582l-2.991,3.129l-2.244-2.297l-5.532,4.99l6.951,7.096l-6.035-2.632l-1.603,3.403l-2.144-1.022l-2.297,4.426 c-21.564-4.144-42.357-8.92-62.357-14.17l-4.525-6.44c33.27,2.777,83.546,3.594,121.104-10.79l-7.448-5.028 c-1.465-0.992-2.197-2.763-1.869-4.502c0.328-1.74,1.663-3.114,3.396-3.495l24.386-5.41c1.969-0.434,3.396-2.152,3.465-4.166 c0.076-2.022-1.228-3.83-3.159-4.402l-6.12-1.816c-1.846-0.55-3.121-2.228-3.167-4.151c-0.046-1.923,1.16-3.655,2.976-4.281 l12.614-4.372c1.755-0.611,2.937-2.251,2.976-4.105c0.03-1.862-1.099-3.541-2.823-4.212l-22.808-8.851 c-0.198-0.077-0.389-0.168-0.572-0.268l-21.587-12.14c-1.427-0.808-2.289-2.327-2.251-3.968c0.038-1.633,0.969-3.121,2.434-3.854 l8.425-4.235c1.656-0.831,2.617-2.609,2.411-4.456c-0.206-1.839-1.534-3.358-3.335-3.8l-58.953-14.62 c-1.572-0.381-2.8-1.595-3.22-3.151c-0.413-1.564,0.053-3.228,1.22-4.342l0.115-0.107c1.137-1.098,1.61-2.708,1.236-4.242 c-0.366-1.534-1.526-2.755-3.037-3.205l-31.446-9.37l-16.879-6.059c0,0-10.591-7.135-13.849-7.844 c2.708,0.534,17.924,3.41,19.541,2.381c1.892-1.214,24.006-3.648,24.006-3.648l-7.585-4.853c0,0,14.544-10.316,18.336-14.567 c3.792-4.25-39.824-4.25-39.824-4.25l5.066-6.074c0,0-30.98-0.603-34.772-1.206c-3.152-0.512-20.785-1.862-34.627-7.562 l-0.93-3.342c14.521,3.426,25.356,0.374,25.356,0.374l-12.659-11.041c14.948,0.603,21.938-4.586,21.938-4.586l-34.017-22.548 c10.705,0.641,35.718,1.549,40.243-3.671c6.295-7.249-36.276-22.296-36.276-22.296l-9.477-5.464l2.908-12.278l35.016,3.777 c42.342-3.029,35.619-12.674,30.988-11.568c0,0-24.319-6.669-31.262-8.89c-6.944-2.228-47.477-32.254-54.421-31.14 c-6.944,1.114-66.004,31.14-70.635,31.14c-4.632,0-42.838-7.783-42.838-7.783s-15.062-6.676-2.319,11.118 c12.736,17.794,25.478,31.14,31.262,32.254l3.472,2.122v9.554c0,0-0.58,7.234-2.892,7.783c-2.312,0.557-9.264,3.891-15.055,7.226 c-5.792,3.342-7.524,8.347-7.524,8.347s1.152,3.892,17.947,1.664c4.616-0.61,9.263,5.563,9.263,5.563l-0.58,4.449l13.315,0.557 c0,0-4.983,8.08-10.186,8.63c0,0-1.74,7.79-5.792,10.568c-4.044,2.778,1.159,7.226,8.683,6.669 c7.532-0.557,21.755-8.737,30.614-7.524l6.906,12.232l-3.754,1.122l3.793,10.927l-9.874,30.729 c-3.838,11.949-11.621,22.235-22.067,29.178c0,0-30.629,21.442-33.163,22.045c-0.93,0.229,4.586,3.914,11.919,8.486 c-2.274,1.701-3.739,3.074-3.739,3.074l-21.099-5.838c-1.289-0.351-2.663-0.114-3.746,0.664c-1.091,0.77-1.77,1.992-1.854,3.319 l-0.144,2.167C43.754,270.17,7.287,242.823,7.287,242.823L0,253.406c33.338,21.968,52.406,34.169,88.453,52.177l-0.45,6.906 l26.538,12.75l6.555-4.197c6.371,2.869,12.774,5.677,19.183,8.394l-1.244,0.641l-6.944,32.781l60.037,71.024l10.111-17l27.18,16.39 l4.426-24.28l18.466-3.96l53.589,18.527v7.287l7.585,5.464l-18.329,14.574c0,0-24.654,5.456-29.08,5.456 c-4.418,0-3.792,4.25-3.792,4.25s13.278,10.926,24.654,10.926c11.378,0,44.876-8.492,46.768-9.103 c1.9-0.61,19.595-20.037,19.595-21.861c0-1.817,1.9-24.281-1.892-26.707c-3.793-2.427-10.118-6.066-10.118-6.066l-11.37,2.427 l-3.167-4.251h-6.318c0,0,2.526,5.464-1.9,3.648c-2.244-0.931-14.636-7.196-26.265-13.132l18.046-3.87l-1.663-4.791 c19.878,5.593,36.772,9.942,49.354,13.04l-0.862,3.945l-0.526-0.03l-0.397,7.272l22.037,1.106c0.573,0.259,1.518,0.664,2.823,1.213 l-18.1-1.091l-0.48,7.272l19.39,1.16c5.997,3.121,47.76,24.165,111.36,40.006l1.908-7.051 c-33.91-8.447-61.548-18.404-80.686-26.234c-8.554-3.502-15.406-6.578-20.358-8.904c20.42,7.722,58.763,20.747,109.407,31.3 l1.602-7.119c-9.607-2.006-18.771-4.098-27.447-6.227c10.05,1.816,20.885,3.48,32.484,4.899l0.961-7.226 c-3.693-0.45-7.287-0.931-10.819-1.434l0.251-1.649c-18.458-2.609-34.719-5.966-48.675-9.469 c16.535,3.12,36.092,5.929,58.457,7.653l0.611-7.256c-14.162-1.091-27.173-2.625-38.992-4.395c12.14,1.053,25.463,1.77,39.9,1.953 l0.1-7.287c-12.172-0.152-23.526-0.695-34.032-1.496C484.637,412.037,491.665,412.197,499.059,412.197z M175.7,311.261 l-21.877,11.224c-7.554-3.358-14.865-6.722-21.931-10.08l1.61-10.836l3.701-3.555c7.356,4.372,13.209,7.783,13.209,7.783 l31.606-23.678l9.477-15.178L175.7,311.261z"></path> </g> </g></svg>
</div>
</body>
</html>

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
*,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  --moon-radius: 200px;
  
  background-color: #000;
  min-height: 100vh;
  display: grid;
  place-content: center;
  font-family: system-ui, sans-serif;
}

.wrapper{
    --ani-speed: 40s;
    --dots-clr: rgb(217, 119, 6);
    --dots-radius: 130px;
  
    position: relative;
    width: var(--moon-radius);
    height: var(--moon-radius);
    border-radius: 50%;
    animation: rotate-outer var(--ani-speed) linear infinite;

}

@media (prefers-reduced-motion: no-preference) {
  /*  animated smoke - an old classic */
	body::before {
		content: "";
		position: fixed;
		inset: 0;
		margin: auto;
		background-image: url("https://raw.githubusercontent.com/cbolson/icodethis-challenges/main/assets/images/smoke-ani.webp");
		opacity: 0.3;
		background-size: calc(var(--moon-radius) * 3);
		background-position: center;
		background-repeat: no-repeat;
		z-index: -10;
	}

@keyframes rotate-outer{
  from{
      transform: rotate(0deg);
    }
    to{
      transform: rotate(360deg);
    }
  }
}

/* moon */
.wrapper::before{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -2;
  animation: rotate-outer var(--ani-speed) linear infinite reverse; /* reverse animation to keep it visually static */
  background-color: rgba(255 255 255 / 1);
 
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: cover;
  opacity: 0.5;
  
  box-shadow: 
    inset 15px 10px 20px 5px rgba(0 0 0 / .2),
    inset -12px -10px 20px 15px rgba(0 0 0 / .44),
    0 0 10px 3px rgba(255 255 255 / .5)
    ;
}
.witch{
  position: absolute;
  inset: 50%;
  width: 60px;
  height: 60px;
  margin: auto;
  z-index: 3;
  animation: rotate-outer var(--ani-speed) linear infinite reverse;
}
section{
    --translate-1: -65px -10px;
    --translate-5: 65px -10px;
    --translate-2: -30px -35px;
    --translate-4: 30px -35px;
    --translate-6: -85px -50px;
    --translate-3: 0px -60px;
    --translate-7: -50px -65px;
    --translate-8: 50px -65px;
    --translate-9: -20px -85px;
    --translate-10: 20px -85px;
    --translate-11: 65px -95px;

--scale-1: 1;
    --scale-5: 1;
    --scale-2: .7;
    --scale-4: .7;
    --scale-6: .7;
    --scale-3: .8;
    --scale-7: .8;
    --scale-8: .8;
    --scale-9: .55;
    --scale-10:.55; 
    --scale-11:.55;

transform-origin: 100px 100px; 
  position: absolute;
  display: grid;
  width: 200px;
  height: 200px;
  grid-template-areas: "stack";
  place-content: center;

--dot-y: calc(var(--dots-radius) * 2);
}
/* Position the sections around the circle */
section:nth-child(2) { transform: rotate(45deg)   translate(0,var(--dot-y));}
section:nth-child(3) { transform: rotate(90deg)   translate(0,var(--dot-y));}
section:nth-child(4) { transform: rotate(135deg)  translate(0,var(--dot-y));}
section:nth-child(5) { transform: rotate(180deg)  translate(0,var(--dot-y));}
section:nth-child(6) { transform: rotate(225deg)  translate(0,var(--dot-y));}
section:nth-child(7) { transform: rotate(270deg)  translate(0,var(--dot-y));}
section:nth-child(8) { transform: rotate(315deg)  translate(0,var(--dot-y));}
section:nth-child(1) { transform: rotate(0deg)    translate(0,var(--dot-y));}

/* :hover */
section:hover{
   --translate-1: -90px 30px;
    --translate-2: -95px -15px;
    --translate-3: 0px -100px;
    --translate-4: 95px -15px;
    --translate-5: 90px 30px;
    --translate-6: -85px -50px;
    --translate-7: -60px -75px;
    --translate-8: 60px -75px;
    --translate-9: -35px -95px;
    --translate-10: 35px -95px;
    --translate-11: 70px -105px;

--scale-1: 1;
    --scale-5: 1;
    --scale-2: .6;
    --scale-4: .6;
    --scale-3: .75;
    --scale-7: .60;
    --scale-8: .6;
    --scale-9: .5;
    --scale-10:.5; 
    --scale-11: .55;
}

section > *{
  grid-area: stack;
  width: 30px;
  height: 30px;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  border-radius: 50%;
  transition: all 300ms cubic-bezier(.27,.16,.33,.95);
}
/* dots */
section > div{
  background-color: var(--dots-clr);
  box-shadow: inset 3px 2px 6px 3px rgba(0 0 0 / .5);
}
section div:nth-of-type(1){
  translate: var(--translate-1);
  scale: var(--scale-1);  
}
section div:nth-of-type(2){
  translate: var(--translate-2);
  scale: var(--scale-2);
}
section div:nth-of-type(3){
  translate: var(--translate-3);
  scale: var(--scale-3);
}
section div:nth-of-type(4){
  translate: var(--translate-4);
  scale: var(--scale-4);
}
section div:nth-of-type(5){
  translate: var(--translate-5);
  scale: var(--scale-5);
}
section div:nth-of-type(6){
  translate:var(--translate-6);
  scale: var(--scale-6);
}
section div:nth-of-type(7){
  translate: var(--translate-7);
  scale: var(--scale-7);
}
section div:nth-of-type(8){
  translate: var(--translate-8);
  scale: var(--scale-8);
}
section div:nth-of-type(9){
  translate: var(--translate-9);
  scale: var(--scale-9);
}
section div:nth-of-type(10){
  translate: var(--translate-10);
  scale: var(--scale-10);
}
section div:nth-of-type(11){
  translate: var(--translate-11);
  scale: var(--scale-11);
}

section button{
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  width: 40px;
  height: 40px;
  animation: rotate-outer var(--ani-speed) linear infinite;
  animation-direction: reverse;
  rotate: var(--button-rotate,0deg);

}

section:nth-of-type(2) button{
  --button-rotate: -45deg;
}
section:nth-of-type(3) button{
  --button-rotate: -90deg;
}
section:nth-of-type(4) button{
  --button-rotate: -135deg;
}
section:nth-of-type(5) button{
  --button-rotate: -180deg;
}
section:nth-of-type(6) button{
  --button-rotate: 135deg;
}
section:nth-of-type(7) button{
  --button-rotate: 90deg;
}
section:nth-of-type(8) button{
  --button-rotate: 45deg;
}

section button svg{
  width: 100%;
  height: 100%;
  scale: var(--button-scale,1);
  z-index: 1;
  transition: scale 500ms cubic-bezier(.27,.16,.33,.95);
}

.wrapper:has(:hover) section:not(:hover) > *{
  opacity: .5;
}
section:hover{
  --dots-clr: rgb(109, 40, 217);
  --button-scale: 3.5;
}

Frontend Forever App